<!-- 型体配色建档：蹇泽阳 -->
<template>
  <div class="app-container">
    <Find :OriginalFilter="{ static: true }" :formList="formList" @findClicked="findData" />
    <el-card style="margin-top: 10px" shadow="always" :body-style="{ padding: '5px' }">
      <div style="display: flex; width: 100%">
        <div style="width: 190px">
          <div class="flex">
            <h1>型体</h1>
            <el-button type="primary" class="primaryBth ml10" @click="ReNumberBtn">重排序号</el-button>
          </div>
          <Table
            :isLoading="isLoading"
            @currentRow="currentRow1"
            :tableData="tableData"
            :tableHeader="tableHeader"
            :TableHeight="70"
            :outTableHeight="150"
          />
          <PageModule
            :PageData="{ total: totalTk, buttonS: true, pageSizeShow: true, small: true }"
            :layout="'prev, pager'"
            @pageSizeChange="handleSizeChangeTk"
            @pageChange="handleCurrentChangeTk"
          />
          <div class="flex mt10">
            <el-button type="primary" class="primaryBth ml5" @click="CheckMethods(0)">检核</el-button>
            <el-button type="primary" class="primaryBth ml5" @click="CheckMethods(1)">取消检核</el-button>
          </div>
          <Table
            :isLoading="isLoading2"
            @currentRow="currentRow2"
            :tableData="tableData2"
            :tableHeader="tableHeader2"
            :TableHeight="30"
            :outTableHeight="150"
          />
        </div>

        <div class="ml20" style="width: 87%">
          <div>
            <div class="flex">
              <h1 class="mb10">用量明细资料</h1>
              <el-button type="primary" class="primaryBth ml10" @click="addOne">添加</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="SectionalSectionFiling">分段部位建档</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="removeBtn">打勾删除</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="SaveBtn">保存</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="addMBtn">生成物料编码</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="emptyMBtn">置空物料编码</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="categoryBtn">分类辅助生成</el-button>
              <el-button type="primary" class="primaryBth ml10" @click="DecompositionBtn">贴合子材料打勾分解</el-button>
            </div>
            <Table
              :isLoading="isLoading3"
              @selectList="selectTable3List"
              @currentRow="currentRow3"
              :tableData="tableData3"
              selection
              :tableHeader="tableHeader3"
              :TableHeight="50"
              @selectListShow="selectListShow"
              @filterMethod="filterMethod3"
            >
              <template v-slot:selectSlot>
                <svg class="circular" viewBox="0 0 50 50">
                  <circle class="path" cx="25" cy="25" r="20" fill="none" />
                </svg>
              </template>
            </Table>
          </div>

          <div class="mt10 flex">
            <div>
              <div class="flex">
                <h1>贴合子材料明细</h1>
                <el-button type="primary" class="primaryBth ml10" @click="saveBtn4">贴合分拆确认</el-button>
                <el-button type="primary" class="primaryBth ml10" @click="copyCBtn4">复制当前材料到勾选部位</el-button>
                <el-button type="primary" class="primaryBth ml10" @click="copyPBtn4">复制勾选部位到其他配色</el-button>
              </div>
              <Table
                :isLoading="isLoading4"
                :tableData="tableData4"
                :tableHeader="tableHeader4"
                :TableHeight="50"
                @currentRow="currentRow4"
                class="mt10"
                @selectListShow="selectListShow4"
              />
            </div>
            <div style="margin-left: 50px">
              <h1>全码用量资料</h1>
              <div class="flex AIC mt10">
                <el-input placeholder="请输入级放基本号" style="width: 140px" ref="InputRef" v-model="baseSize" size="small" />
                <el-button type="primary" class="primaryBth ml10" @click="StagePositionQuanMa">级放部位全码用量</el-button>
              </div>
              <div class="flex AIC mt10">
                <el-button type="primary" class="primaryBth" @click="addQuanMa">新增</el-button>
                <el-button type="primary" class="primaryBth" @click="removeQuanMa">删除当前行</el-button>
              </div>
              <Table
                :isLoading="isLoading5"
                :tableData="tableData5"
                :tableHeader="tableHeader5"
                :TableHeight="50"
                @confirmChange="confirmChange5"
                @selectList="selectTableList5"
                @currentRow="currentRow5"
              />
            </div>
          </div>
        </div>
      </div>
    </el-card>

    <!-- 分段部位建档 -->
    <el-dialog v-model="SectionalSectionDialog" title="分段建档" :direction="'ttb'" size="small" :with-header="false" width="15%">
      <div class="flex AIC">
        <el-input v-model="NumberSegments" placeholder="请输入分段数" clearable @change=""></el-input>
        <el-button type="primary" class="primaryBth ml15" @click="GenerateSegmentedBtn">生成分段资料</el-button>
      </div>
    </el-dialog>

    <!-- 注意事项建档 -->
    <el-dialog v-model="dialogVisible" title="注意事项建档" :direction="'ttb'" size="small" :with-header="false">
      <Table :tableData="PrecautionsDateList" :tableHeader="tableHeader19" :TableHeight="80" />
      <div style="margin: auto; width: 55px">
        <el-button type="primary" size="default" @click="inputChange">保存</el-button>
      </div>
    </el-dialog>

    <!-- 复制用量 -->
    <el-dialog v-model="CopyDosageDialog" title="选择材料" width="35%" class="dialog pb0">
      <div>
        <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList8" @findClicked="findClicked8" />
        <Table
          @selectList="selectTableList8"
          :selection="true"
          :tableHeader="tableHeader8"
          :tableData="tableData8"
          :TableHeight="40"
          :outTableHeight="230"
        />
        <PageModule
          :PageData="{ total: total8, pageSizeShow: true, buttonS: true }"
          :layout="'prev, pager'"
          @pageSizeChange="handleSizeChange8"
          @pageChange="handleCurrentChange8"
        />
        <h4 class="mt10" style="color: #0000ff; text-align: center">把当前型体颜色用量复制到以上打勾型体颜色</h4>
      </div>
    </el-dialog>

    <!-- 分类关键词定义 -->
    <el-drawer v-model="drawer" :direction="'ttb'" size="small" :with-header="false">
      <span @click="drawer = false" style="float: right; cursor: pointer; color: rgb(7, 7, 7)">X</span>
      <div class="flex AIC" style="flex-direction: column">
        <Find :OriginalFilter="{ static: true }" :searchImg="false" :formList="formList10" @findClicked="findClicked10" />
        <div class="flex mt10 JCC" style="width: 100%; background-color: white">
          <el-card shadow="never" :body-style="{ padding: '5px 10px 5px' }">
            <h1 class="f16">关键词定义</h1>
            <Table :tableHeader="tableHeader10" :tableData="tableData10" class="mt10" :outTableHeight="150" />
          </el-card>
        </div>
      </div>
    </el-drawer>

    <!-- BOM资料复制 -->
    <el-dialog v-model="BOMdialog" title="BOM资料复制" width="40%" class="dialog pb0">
      <div>
        <Find @clickInput="(item: any) => clickInput(item, 1)" :OriginalFilter="{ static: true }" :formList="formList11" />
        <el-radio-group v-model="BOMradio" class="ml-4">
          <el-radio label="01" value="01" size="large">复制资料包含材料颜色</el-radio>
          <el-radio label="02" value="02" size="large">复制资料不包含材料颜色</el-radio>
        </el-radio-group>
        <h3>复制到</h3>
        <Find
          :searchImg="false"
          @clickInput="(item: any) => clickInput(item, 2)"
          :OriginalFilter="{ static: true }"
          :formList="formList12"
          @findClicked="findClicked12"
        />
      </div>
    </el-dialog>

    <!-- BOM资料删除 -->
    <el-dialog v-model="BOMDeleteDialog" title="BOM资料删除" width="34%" class="dialog pb0">
      <div>
        <Find
          :searchImg="false"
          @clickInput="(item: any) => clickInput(item, 3)"
          :OriginalFilter="{ static: true }"
          :formList="formList13"
          @findClicked="findClicked13"
        />
      </div>
    </el-dialog>

    <!-- 表三材料名称下拉框 -->
    <el-dialog v-model="MtlSelectDialog" title="材料名称选择" width="40%" class="dialog pb0">
      <div class="flex">
        <span style="color: red">点击行选择</span>
        <el-input v-model="MtlName" placeholder="搜索品名" size="small" clearable style="width: 140px" class="ml10"></el-input>
      </div>
      <Table :isLoading="isLoading6" :tableHeader="MtNameTableHeader" :tableData="MtNameTableData" @currentRow="MtNameCurrentRow" :TableHeight="50" />
      <PageModule
        :PageData="{ total: MtNameTotal, pageSizeShow: true, buttonS: true }"
        :layout="'prev, pager'"
        @pageSizeChange="MtNameSizeChange"
        @pageChange="MtNameCurrentChange"
      />
    </el-dialog>

    <el-dialog v-model="dialog" title="双击行搜索" width="35%" draggable>
      <div class="flex">
        <el-input v-model="dialogStyle" placeholder="请输入型体" clearable></el-input>
        <el-input v-model="dialogColorCode" placeholder="请输入颜色代码" clearable class="ml10"></el-input>
        <el-input v-model="dialogColorName" placeholder="请输入颜色名称" clearable class="ml10"></el-input>
      </div>
      <Table
        :isLoading="isLoading13"
        :tableHeader="tableHeader13"
        :tableData="tableData13"
        :TableHeight="50"
        :outTableHeight="140"
        @currentRow1="dbClick"
      />
      <PageModule
        :PageData="{ total: total13, pageSizeShow: true, buttonS: true }"
        :layout="'prev, pager'"
        @pageSizeChange="handleSizeChange13"
        @pageChange="handleCurrentChange13"
      />
    </el-dialog>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import LoginWork from '@/utils/LoginWork'
import { useRouter } from 'vue-router'
import service from '@/utils/request'
import { formateData } from '@/plugins/mixinJ'
import { debounce } from 'lodash'
import JMessage from '@/utils/JMessage'
export default defineComponent({
  name: 'TypeBodyColorMatching'
})
</script>
<script lang="ts" setup>
import { i18n, Jzhcn } from '@/i18n'
import { ref, onMounted, watch } from 'vue'
import {
  LevelBasicNumber,
  FullCodeUsageData,
  TypeQuery,
  ColorCodeQuery,
  UpdateFullCodeUsage
} from '@/api/ControlDepartment/MaterialManagement/BulkQuantityFile'

const ClassificationNameOption = ref([]) // 表三分类名称下拉框数据
const MtlNoOption = ref([]) // 表三物料编码下拉框数据
const MtlColorOption = ref([]) // 表三材料颜色下拉框数据
const formList = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入型体',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色代码',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入颜色名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '导入'
  },
  {
    type: 'button',
    checkboxLabel: '注意事项建档'
  },
  {
    type: 'button',
    checkboxLabel: 'BOM表导出'
  },
  {
    type: 'button',
    checkboxLabel: '分类关键词定义'
  },
  {
    type: 'button',
    checkboxLabel: 'BOM资料复制'
  },
  {
    type: 'button',
    checkboxLabel: 'BOM资料删除'
  },
  {
    type: 'button',
    checkboxLabel: '转型体资料建档'
  },
  {
    type: 'button',
    checkboxLabel: '转指令资料输入'
  },
  {
    type: 'button',
    checkboxLabel: '复制用量'
  }
]) as any

const isLoading = ref(true)
const isLoading2 = ref(true)
const isLoading3 = ref(true)
const isLoading4 = ref(true)
const isLoading5 = ref(true)

const findData = (count: any) => {
  if (count === '导入') {
    // TODO: 没写接口
  }
  if (count === '注意事项建档') {
    PrecautionsFileMethods()
    dialogVisible.value = true
  }
  if (count === 'BOM表导出') {
    // TODO: 没写接口
  }
  if (count === '分类关键词定义') {
    getTableList10()
    drawer.value = true
  }
  if (count === 'BOM资料复制') {
    BOMdialog.value = true
    formList11.value[0].inputValue = `${currentTableRow.value.style}  ${currentTable2Row.value.colorCode}  ${currentTable2Row.value.styleColor}`
  }
  if (count === 'BOM资料删除') {
    BOMDeleteDialog.value = true
    // 获取下拉框数据
    getBOMSelectList3()
  }
  if (count === '转型体资料建档') {
    router.push({
      path: '/ControlDepartment/MaterialManagement/BulkBodyFile'
    })
  }
  if (count === '转指令资料输入') {
    router.push({
      path: '/ControlDepartment/FactoryProduction/InstructionDataEntry'
    })
  }
  if (count === '复制用量') {
    getCopyDosageList()
    CopyDosageDialog.value = true
  }
}

// 表一模块
const tableHeader = ref([
  {
    label: '型体',
    prop: 'style'
  }
])
const imgList = ref<any>([])
const totalTk = ref(0)
const currentPage = ref(1)
const pageSize = ref(40)
const tableData = ref<any>([])
// 获取表一数据
const getTableList = debounce(async () => {
  isLoading.value = true
  const result = await TypeQuery({
    colorCode: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色代码'
    )?.inputValue,
    pageNum: currentPage.value,
    pageSize: pageSize.value,
    styleColor: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色名称'
    )?.inputValue,
    styleNo: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入型体'
    )?.inputValue
  })
  totalTk.value = result.total
  tableData.value = result.list.map((item: any) => {
    return { style: item }
  })
  currentRow1()
  isLoading.value = false
}, 500)
const handleSizeChangeTk = (val: number) => {
  pageSize.value = val
  getTableList()
}
const handleCurrentChangeTk = (val: number) => {
  currentPage.value = val
  getTableList()
}
const currentTableRow = ref({}) as any
const currentRow1 = (row: any = tableData.value[0]) => {
  currentTableRow.value = row
  getTableList2()
}
onMounted(() => {
  getTableList()
})
watch(
  () =>
    formList.value.map((item: any) => {
      item.selectValue, item.inputValue, item.dateValue, item.checked
    }),
  () => {
    getTableList()
  }
)
// 重排序号
const ReNumberBtn = async () => {
  const res = (await LoginWork.post('/Cargo/getReordering', {
    cfmFlag: currentTable2Row.value.cfmFlag,
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList()
  } else {
    JMessage.error(res.message)
  }
}
// 检核与取消检核
const CheckMethods = async (choose: any = 0) => {
  const res = (await LoginWork.post(`/Cargo/getCheckOut/${choose}`, {
    cfmFlag: currentTable2Row.value.cfmFlag,
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList2()
  } else {
    JMessage.error(res.message)
  }
}

// 表二模块
const tableHeader2 = ref([
  {
    label: '代码',
    prop: 'colorCode',
    width: '80',
    change: true
  },
  {
    label: '颜色',
    width: '80',
    prop: 'styleColor',
    change: true,
    backgroundColor: true
  },
  {
    label: '图片',
    fixed: true,
    prop: 'photoPath',
    type: 'img',
    srcList: imgList
  }
])
const total2 = ref(0)
const currentPage2 = ref(1)
const pageSize2 = ref(40)
const getTableList2 = async () => {
  isLoading2.value = true
  const result = (await ColorCodeQuery({
    colorCode: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色代码'
    )?.inputValue,
    pageNum: currentPage2.value,
    pageSize: pageSize2.value,
    styleColor: formList.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入颜色名称'
    )?.inputValue,
    styleNo: currentTableRow.value.style || ''
  })) as any
  tableData2.value = result.list.map((item: any) => {
    if (item.cfmFlag === 'Y') item.backgroundColor = '#80FF00'
    return item
  }) as any
  imgList.value = result.list.map((item: any) => {
    return item.photoPath
  })
  total2.value = result.total
  currentRow2()
  isLoading2.value = false
}
const currentTable2Row = ref({}) as any
const currentRow2 = (row: any = tableData2.value[0]) => {
  currentTable2Row.value = row
  getTableList3()
}

// 表三模块
const tableHeader3 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    change: true,
    width: '50'
  },
  {
    label: '部位',
    prop: 'partName',
    width: '120',
    disable: true
  },
  {
    label: '分段',
    prop: 'segment',
    change: true,
    width: '50'
  },
  {
    width: '100',
    type: 'select',
    label: '分类名称',
    prop: 'typeName',
    disable: true
  },
  {
    type: 'selectJV2',
    width: '160',
    label: '物料编码',
    prop: 'mtlNo',
    change: true,
    options: MtlNoOption
  },
  {
    allowCreate: true,
    type: 'select',
    width: '180',
    label: '材料颜色',
    prop: 'mtlColor',
    disable: true
  },
  {
    width: '180',
    label: '材料名称',
    prop: 'mtlName',
    disable: true
  },
  {
    type: 'select',
    width: '100',
    label: '规格',
    prop: 'mtlSpec',
    disable: true
  },
  {
    type: 'select',
    width: '100',
    label: '单位',
    prop: 'mtlUnit',
    disable: true
  },
  {
    label: '尺码起',
    prop: 'size1',
    disable: true
  },
  {
    label: '尺码止',
    prop: 'size2',
    disable: true
  },
  {
    label: '用量',
    prop: 'usage',
    disable: true
  },
  {
    label: '计算方式',
    width: '100',
    prop: 'usageType',
    type: 'select',
    disable: true
  },
  {
    width: '100',
    type: 'select',
    label: '领用部门',
    prop: 'drawDept',
    disable: true
  },
  {
    label: '捡料',
    prop: 'noLotUsage',
    type: 'checkbox',
    change: true
  },
  {
    width: '100',
    type: 'select',
    label: '主辅料',
    prop: 'mtlProperty',
    disable: true
  },
  {
    label: '备注',
    prop: 'remark'
  }
])
const tableData3 = ref([]) as any
const getTableList3 = async () => {
  isLoading3.value = true
  const result = await LoginWork.post('/Cargo/getDevelopBomUsageList', {
    styleNo: currentTableRow.value.style || '',
    styleColor: currentTable2Row.value.styleColor || '',
    cfmFlag: currentTable2Row.value.cfmFlag || ''
  })
  tableData3.value = result.data.map((item: any) => {
    item.change = 'Y'
    if (currentTable2Row.value.cfmFlag === 'Y') {
      item.disable = true
    } else {
      item.disable = false
    }
    if (item.noLotUsage === 'Y') {
      item.noLotUsage = true
    }
    // 分类名称
    item.typeName = { selectValue: item.typeName || '', options: [] }
    // // 材料颜色
    // item.mtlColor = {
    //   PageModule: true,
    //   total: 0,
    //   selectValue: item.mtlColor || ' ',
    //   options: [],
    //   handleSizeChange: (val: number) => {
    //     mtlColorPageSize.value = val
    //     getColorOptionList(item)
    //   },
    //   handleCurrentChange: (val: number) => {
    //     mtlColorCurrentPage.value = val
    //     getColorOptionList(item)
    //   },
    // }

    // 材料名称
    // item.mtlName = { selectValue: item.mtlName, options: [] }
    // 规格
    item.mtlSpec = { selectValue: item.mtlSpec || '', options: [] }
    // 单位
    item.mtlUnit = { selectValue: item.mtlUnit || '', options: [] }
    // 计算方式
    item.usageType = { selectValue: item.usageType || '', options: [] }
    // 领用部门
    item.drawDept = { selectValue: item.drawDept || '', options: [] }
    // 主辅料
    item.mtlProperty = { selectValue: item.mtlProperty || '', options: [] }
    item.disableConfirm = true
    return item
  })
  tableData3.value.map((item: any) => {
    // 材料颜色
    item.mtlColor = {
      PageModule: true,
      total: 0,
      selectValue: item.mtlColor || ' ',
      options: [],
      handleSizeChange: (val: number) => {
        mtlColorPageSize.value = val
        getColorOptionList(item)
      },
      handleCurrentChange: (val: number) => {
        mtlColorCurrentPage.value = val
        getColorOptionList(item)
      }
    }
    return item
  })
  isLoading3.value = false
  currentRow3()
}

const currentTable3Row = ref({}) as any
const currentTable3RowCopy = ref({}) as any // 没有格式化的当前行
const currentRow3 = (row: any = tableData3.value[0], scop: any = {}) => {
  currentTable3Row.value = formateData([row])[0]
  if (row !== currentTable3RowCopy.value) {
    getTableList4()
    getTableList5()
  }
  currentTable3RowCopy.value = row
  if (scop.column && scop.column.label === '材料名称') {
    MtlSelectDialog.value = true
    getMtNameTableList()
  }
}
const selectedLists3 = ref([]) as any
const selectTable3List = (selectedList: any) => {
  const copyData = formateData(selectedList)
  selectedLists3.value = copyData
}
const filterMethod3 = debounce((inputVal: string, row: any, item) => {
  // 有分页才走这里面
  if (item.label === '材料颜色' && !selectFirst.value) {
    row.mtlColor.selectValue = inputVal
    getColorOptionList(row)
  }
  selectFirst.value = false
}, 500)
// 下拉框显示隐藏
const isShowTemplate = ref(false)
const selectFirst = ref(true)
const selectListShow = (row: any, visible: any, item: any, fn: any) => {
  isShowTemplate.value = false // 显示加载中图标，如果有数据就在获取接口的函数中等于true
  if (item === '分类名称' && visible) {
    getTypeNameOptionList(row, fn)
  } else if (item === '材料颜色' && visible) {
    selectFirst.value = true
    getColorOptionList(row)
  } else if (item === '规格' && visible) {
    getMtlSpecOptionList(row, fn)
  } else if (item === '单位' && visible) {
    getMtlUnitOptionList(row, fn)
  } else if (item === '计算方式' && visible) {
    getUsageTypeOptionList(row, fn)
  } else if (item === '领用部门' && visible) {
    getDepartmentOptionList(row, fn)
  } else if (item === '主辅料' && visible) {
    getMtlPropertyOptionList(row, fn)
  } else {
    row.typeName.options = []
    row.mtlColor.options = []
    row.mtlSpec.options = []
    row.mtlUnit.options = []
    row.usageType.options = []
    row.drawDept.options = []
    MtNameTableData.value = []
  }
}
// 分类名称下拉框模块：
const getTypeNameOptionList = async (row: any, fn: any) => {
  const { typeName } = row
  const res = await LoginWork.get('/back/getMtlType3')
  typeName.options.splice(0)
  res.data.map((item: any) => {
    // return { value: item, label: item }
    typeName.options.push({ value: `${item.typeName}  ${item.typeNo}`, label: item.typeName })
  })
  fn(typeName.options)
}
// 规格下拉框模块：
const getMtlSpecOptionList = async (row: any, fn: any) => {
  const { mtlSpec } = row
  const res = await LoginWork.get('/back/getMtlUS1')
  mtlSpec.options.splice(0)
  res.data.specs.map((item: any) => {
    mtlSpec.options.push({ value: item, label: item })
  })
  fn(mtlSpec.options)
}
// 单位下拉框模块
const getMtlUnitOptionList = async (row: any, fn: any) => {
  const { mtlUnit } = row
  const res = await LoginWork.get('/back/getMtlUS1')
  mtlUnit.options.splice(0)
  res.data.units.map((item: any) => {
    mtlUnit.options.push({ value: item, label: item })
  })
  fn(mtlUnit.options)
}
// 计算方式下拉框模块
const getUsageTypeOptionList = async (row: any, fn: any) => {
  const { usageType } = row
  usageType.options.splice(0)
  usageType.options.push({ value: '全码', label: '全码' }, { value: '基本码', label: '基本码' }, { value: '中间码', label: '中间码' })
  fn(usageType.options)
}
// 领用部门下拉框模块
const getDepartmentOptionList = async (row: any, fn: any) => {
  const { drawDept } = row
  drawDept.options.splice(0)
  drawDept.options.push(
    { value: '冲裁', label: '冲裁' },
    { value: '外协', label: '外协' },
    { value: '电脑车', label: '电脑车' },
    { value: '针车', label: '针车' },
    { value: '成型', label: '成型' }
  )
  fn(drawDept.options)
}
// 主辅料下拉框模块
const getMtlPropertyOptionList = async (row: any, fn: any) => {
  const { mtlProperty } = row
  mtlProperty.options.splice(0)
  mtlProperty.options.push(
    { value: '冲裁主料', label: '冲裁主料' },
    { value: '冲裁辅料', label: '冲裁辅料' },
    { value: '针车辅料', label: '针车辅料' }
  )
  fn(mtlProperty.options)
}
// 材料颜色下拉框
const mtlColorPageSize = ref(40)
const mtlColorCurrentPage = ref(1)
// 获取材料颜色下拉框数据
const getColorOptionList = async (row: any) => {
  let mtlColor = ''
  row.mtlColor.selectValue === '' ? (mtlColor = '') : (mtlColor = encodeURIComponent(row.mtlColor.selectValue))
  if (selectFirst.value === true) {
    ;(row.mtlColor.selectValue = ''), (mtlColor = '')
  }
  console.log(row.mtlColor.selectValue)

  const res3 = (await LoginWork.post(
    `/sdStyle/getMtlColor?colorName=${mtlColor}&pageNum=${mtlColorCurrentPage.value}&pageSize=${mtlColorPageSize.value}`
  )) as any
  row.mtlColor.total = res3.data.total
  row.mtlColor.options = res3.data.list.map((item: any) => {
    return { value: item, label: item }
  })
  // mtlColor.options.splice(0)
  // res3.data.list.map((item: any) => {
  //   mtlColor.options.push({ value: item, label: item })
  // })
}

// 材料名称下拉框模块：
const MtlSelectDialog = ref(false)
const MtlName = ref('')
const MtNameTableHeader = ref([
  {
    label: '料号',
    prop: 'mtlNo'
  },
  {
    width: '200',
    label: '品名',
    prop: 'mtlName'
  },
  {
    label: '规格',
    prop: 'mtlSpec'
  },
  {
    label: '单位',
    prop: 'mtlUnit'
  },
  {
    label: '类别代码',
    prop: 'typeNo'
  },
  {
    label: '类别名称',
    prop: 'typeName'
  }
])
const MtNameTableData = ref([])
const MtNameTotal = ref(0)
const MtNameSize = ref(40)
const MtNameCurrent = ref(1)
const isLoading6 = ref(false)
const getMtNameTableList = debounce(async () => {
  isLoading6.value = true
  const res = (await service.post('/material/mtl/sdMtlNewList', {
    custom: '',
    mtlColor: '',
    mtlName1: MtlName.value,
    mtlName2: '',
    mtlName3: '',
    mtlNo: '',
    mtlSpec1: '',
    mtlSpec2: '',
    mtlUnit: '',
    pageNum: MtNameCurrent.value,
    pageSize: MtNameSize.value,
    typeName: '',
    typeNo1: '',
    typeNo2: ''
  })) as any
  isLoading6.value = false
  MtNameTotal.value = res.total
  MtNameTableData.value = res.list
}, 500)
const MtNameSizeChange = (val: number) => {
  MtNameSize.value = val
  getMtNameTableList()
}
const MtNameCurrentChange = (val: number) => {
  MtNameCurrent.value = val
  getMtNameTableList()
}
// 点击材料名称下拉框表格中的当前行
const MtNameCurrentRow = (row: any, index: any) => {
  // console.log(row);
  currentTable3RowCopy.value.typeName.selectValue = row.typeName
  currentTable3RowCopy.value.typeNo = row.typeNo
  currentTable3RowCopy.value.mtlName = row.mtlName
  currentTable3RowCopy.value.mtlUnit.selectValue = row.mtlUnit
  currentTable3RowCopy.value.usageType.selectValue = '中间码'
  MtlSelectDialog.value = false
}
watch(MtlName, () => {
  getMtNameTableList()
})

// 添加按钮
const addOne = () => {
  tableData3.value.unshift({
    disableConfirm: true,
    change: 'Y',
    typeName: { selectValue: '', options: [] },
    mtlColor: {
      PageModule: true,
      total: 0,
      selectValue: ' ',
      options: [],
      handleSizeChange: (val: number) => {
        mtlColorPageSize.value = val
        getColorOptionList(tableData3.value[0])
      },
      handleCurrentChange: (val: number) => {
        mtlColorCurrentPage.value = val
        getColorOptionList(tableData3.value[0])
      }
    },
    mtlSpec: { selectValue: '', options: [] },
    mtlUnit: { selectValue: '', options: [] },
    usageType: { selectValue: '', options: [] },
    drawDept: { selectValue: '', options: [] },
    mtlProperty: { selectValue: '', options: [] },
    seqNo: tableData3.value.length + 1,
    segment: 0
  })
}

// 分段部位建档
const SectionalSectionDialog = ref(false) // Dialog显示隐藏
const NumberSegments = ref('')
const SectionalSectionFiling = () => {
  if (currentTable3Row.value.segment !== '0') {
    JMessage.error('分段数量不为0，无法分段')
    return
  } else {
    SectionalSectionDialog.value = true
    NumberSegments.value = ''
  }
}
const GenerateSegmentedBtn = async () => {
  if (NumberSegments.value === '') {
    JMessage.error('请输入分段数')
    return
  }
  const res = (await LoginWork.post(`/sdStyle/sectionalSectionFiling?segment=${NumberSegments.value}`, { ...currentTable3Row.value })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
    SectionalSectionDialog.value = false
  } else {
    JMessage.error(res.message)
  }
}

// 保存按钮
const SaveBtn = async () => {
  const data = formateData(tableData3.value).map((item: any) => {
    console.log(item.typeName)
    if (item.typeName.includes('  ')) item.mtlTypeNo = item.typeName.split('  ')[1]
    if (item.typeNo) item.mtlTypeNo = item.typeNo
    return item
  })
  const res = (await LoginWork.post('/Cargo/getDevelopBomUsageSave', {
    styleColor: currentTable2Row.value.styleColor,
    styleColorMaterialRequests: data,
    styleColorRemark: '',
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

// 打勾删除按钮
const removeBtn = async () => {
  const res = (await LoginWork.post('/Cargo/getDeleteTickRecords', {
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style,
    seqNoList: selectedLists3.value.map((item: any) => item.seqNo)
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

// 生成物料编码
const addMBtn = async () => {
  const copyData = formateData(tableData3.value)
  const res = (await LoginWork.post('/sdStyle/generateMaterialCode', copyData)) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

// 置空物料编码
const emptyMBtn = async () => {
  if (currentTable3Row.value.mtlNo === '') return
  const res = (await LoginWork.post('/sdStyle/setNullMaterialCode', currentTable3Row.value)) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

// 分类辅助生成
const categoryBtn = async () => {
  // TODO: 成功后没变化
  const res = (await LoginWork.post('/sdStyle/createTypeNo', [currentTable3Row.value])) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList3()
  } else {
    JMessage.error(res.message)
  }
}

// 贴合子材料打勾分解
const DecompositionBtn = async () => {
  if (selectedLists3.value.length === 0) {
    JMessage.error('请选择要分解的数据')
    return
  } else if (selectedLists3.value.length === 1 && !selectedLists3.value.every((item: any) => item.typeName === '合贴')) {
    JMessage.error('分类名称必须都为合贴')
    return
  } else {
    const res = (await LoginWork.post('/sdStyle/laminatedWoodDecomposition', selectedLists3.value)) as any
    if (res.code === 200) {
      JMessage.success(res.message)
      getTableList3()
    } else {
      JMessage.error(res.message)
    }
  }
}

// 表四模块
const tableHeader4 = ref([
  {
    type: 'select',
    label: '分类名称',
    prop: 'subMtlTypeName',
    width: '100'
  },
  {
    label: '物料编码',
    width: '150',
    prop: 'subMtlNo',
    change: true
  },
  {
    label: '材料颜色',
    prop: 'subMtlColor',
    change: true
  },
  {
    width: '150',
    label: '材料名称',
    prop: 'subMtlName',
    change: true
  },
  {
    label: '规格',
    prop: 'subMtlSpec',
    change: true
  },
  {
    label: '单位',
    prop: 'subMtlUnit',
    change: true
  },
  {
    label: '加工方式',
    prop: 'prdType'
  },
  {
    label: '比例',
    prop: 'percent'
  },
  {
    type: 'checkbox',
    label: '是否请购',
    prop: 'purFlag'
  }
])
const tableData4 = ref()
const getTableList4 = async () => {
  isLoading4.value = true
  const result = (await service.post('/sdStyle/getSdBomFitSubNew2', currentTable3Row.value)) as any
  tableData4.value = result.map((item: any) => {
    item.subMtlTypeName = {
      selectValue: item.subMtlTypeName || '',
      options: []
    } // 分类名称
    item.purFlag === 'Y' ? (item.purFlag = true) : (item.purFlag = false)
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
  isLoading4.value = false
}
// 下拉框显示与隐藏触发
const selectListShow4 = async (row: any, visible: any, item: any, fn: any) => {
  // 获取分类名称数据
  if (visible) {
    const result = (await LoginWork.get('/back/getYfMtlType3')) as any
    row.subMtlTypeName.options = result.data.map((item: any) => {
      return {
        label: item.TYPE_NAME,
        value: `${item.TYPE_NAME}  ${item.TYPE_NO}`
      }
    })
    // subMtlTypeName.options.splice(0)
    // result.data.map((item: any) => {
    //   // return { value: item, label: item }
    //   subMtlTypeName.options.push({
    //     label: item.TYPE_NAME,
    //     value: `${item.TYPE_NAME}  ${item.TYPE_NO}`
    //   })
    // })
    fn(row.subMtlTypeName.options)
  } else {
    row.subMtlTypeName.options = []
  }
}
const currentTable4Row = ref({}) as any
const currentRow4 = (row: any = tableData4.value[0], scop: any = {}) => {
  currentTable4Row.value = row
}
// 保存表四修改
const saveBtn4 = async () => {
  const data = formateData(tableData4.value).map((item: any) => {
    item.purFlag = item.purFlag ? 'Y' : null
    if (item.subMtlTypeName.includes('  ')) {
      item.subMtlTypeNo = item.subMtlTypeName.split('  ')[1]
      item.subMtlTypeName = item.subMtlTypeName.split('  ')[0]
    }
    return item
  })
  const res = (await LoginWork.post('/sdStyle/fitSplitConfirmation', {
    list: data,
    color: currentTable3Row.value.color,
    mtlColor: currentTable3Row.value.mtlColor,
    mtlName: currentTable3Row.value.mtlName,
    mtlSpec: currentTable3Row.value.mtlSpec,
    mtlTypeNo: currentTable3Row.value.mtlTypeNo,
    mtlUnit: currentTable3Row.value.mtlUnit,
    seqNo: currentTable3Row.value.seqNo,
    style: currentTable3Row.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList4()
  } else {
    JMessage.error(res.message)
  }
}
// 复制当前材料到勾选部位
const copyCBtn4 = async () => {
  if (selectedLists3.value.length === 0) {
    JMessage.warning('请勾选部位')
    return
  }
  const data = formateData([currentTable3Row.value])
  const res = (await LoginWork.post('/sdStyle/copyCurrTo', {
    dto: data[0],
    seqs: selectedLists3.value.map((item: any) => item.seqNo),
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList4()
  } else {
    JMessage.error(res.message)
  }
}
// 复制勾选部位到当前贴合子
const copyPBtn4 = async () => {
  const data = formateData([currentTable3Row.value]).map((item: any) => {
    item.purFlag = item.purFlag ? 'Y' : null
    if (item.subMtlTypeName && item.subMtlTypeName.includes('  ')) {
      item.subMtlTypeNo = item.subMtlTypeName.split('  ')[1]
      item.subMtlTypeName = item.subMtlTypeName.split('  ')[0]
    }
    return item
  })
  const res = (await LoginWork.post('/sdStyle/copyCurrTo', {
    // ...data[0],
    seqs: selectedLists3.value.map((item: any) => item.seqNo)
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList4()
  } else {
    JMessage.error(res.message)
  }
}

// 表五模块
const tableHeader5 = ref([
  {
    label: '号码',
    prop: 'sizeFrom'
  },
  {
    label: '用量',
    prop: 'mtlUsage'
  }
])
const tableData5 = ref<any>([])
const getTableList5 = async () => {
  isLoading5.value = true
  try {
    const result = await FullCodeUsageData({ ...currentTable3Row.value })
    tableData5.value = result.map((item: any) => {
      item.change = 'Y'
      return item
    })
  } catch (error) {
  } finally {
    isLoading5.value = false
  }
}
// 点击表给另一张表传数据
const currentTableRow5 = ref({}) as any
const currentRow5 = async (row: any = tableData5.value[0]) => {
  currentTableRow5.value = row
}
// 级放部位全码用量按钮模块
const baseSize = ref('')
const StagePositionQuanMa = async () => {
  if (baseSize.value === '') {
    JMessage.warning('基本号码不可为空')
  } else {
    console.log(currentTable3Row.value)
    const result = await LevelBasicNumber({
      ...currentTable3Row.value,
      styleNo: currentTableRow.value.style,
      styleColor: currentTable2Row.value.styleColor,
      baseSize: baseSize.value
    })
    if (result.code === 200) {
      getTableList5()
      JMessage.success(result.message)
      baseSize.value = ''
    } else {
      JMessage.error(result.message)
    }
  }
}
// 新增全码用量
const addQuanMa = () => {
  tableData5.value.unshift({ sizeFrom: '', mtlUsage: '', change: 'Y' })
}

// 更新全码用量
const confirmChange5 = async (row: any) => {
  const res = (await LoginWork.post('/Cargo/getFullCodeDetailRenewA2U', {
    list: tableData5.value.map((item: any) => {
      item.partName = currentTable3Row.value.partName
      item.segment = currentTable3Row.value.segment
      return item
    }),
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList5()
  } else {
    JMessage.error(res.message)
  }
}
// 删除全码用量
const removeQuanMa = async () => {
  const res = (await LoginWork.post('/Cargo/getFullCodeSizeDel', {
    list: [currentTableRow5.value].map((item: any) => {
      item.partName = currentTable3Row.value.partName
      item.segment = currentTable3Row.value.segment
      return item
    }),
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  if (res.code === 200) {
    JMessage.success(res.message)
    getTableList5()
  } else {
    JMessage.error(res.message)
  }
}
const selectedLists5 = ref([])
const selectTableList5 = (selectedList: any) => {
  selectedLists5.value = selectedList
}

// 复制用量
// const ReplicationDosageMethodsParms = ref<any>([])
// const selectedList12 = (row: any) => {
//   ReplicationDosageMethodsParms.value = row.map((item: any) => {
//     return item
//   })
// }
// const ReplicationDosageMethods = async () => {
//   const result = await LoginWork.post<any, any>(`/Cargo/getCopyingDosage`, { currentStyleColor: FullCodeUsageCheckMethodsParms.value.styleColor, currentStyleNo: FullCodeUsageCheckMethodsParms.value.styleNo, list: ReplicationDosageMethodsParms.value })
//   if (result.code === 200) {
//     dialogVisible5.value = false
//     JMessage.success(result.message)
//   } else {
//     dialogVisible5.value = false
//     JMessage.error(result.message)
//   }
// }
// // 复制用量查询列表
// const dialogVisible5 = ref(false)
// const ReplicationVolumeQueryTableDateList = ref<any>({
//   list: [],
// })
// const totalActiveList = ref(0)
// const ReplicationVolumeQueryTableDateListParms = ref<any>({
//   pageNum: 1,
//   pageSize: 20,
//   styleNo: ''
// })
const CopyDosageDialog = ref(false)
const currentPage8 = ref(1)
const pageSize8 = ref(40)
const total8 = ref(0)
const isLoading8 = ref(false)
const tableData8 = ref([])
const formList8 = ref([
  {
    type: 'input',
    inputValue: '',
    inputPlaceholder: '型体'
  },
  {
    type: 'button',
    checkboxLabel: '复制'
  }
])
const tableHeader8 = ref([
  {
    label: '型体',
    prop: 'styleNo'
  },
  {
    label: '颜色',
    prop: 'styleColor'
  },
  {
    label: '冲刀号(起)',
    prop: 'minCutSize'
  },
  {
    label: '冲刀号(止)',
    prop: 'maxCutSize'
  }
])
const findClicked8 = async (content: string) => {
  // TODO: 没变化
  if (content === '复制') {
    const res = (await LoginWork.post('/Cargo/getCopyingDosage', {
      currentStyleColor: currentTable2Row.value.styleColor,
      currentStyleNo: currentTableRow.value.style,
      list: selectedLists8.value.map((item: any) => {
        return {
          styleNo: item.styleNo,
          styleColor: item.styleColor,
          cfmFlag: item.cfmFlag
        }
      })
    })) as any
    if (res.code === 200) {
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  }
}
const handleSizeChange8 = (val: number) => {
  pageSize8.value = val
  getCopyDosageList()
}
const handleCurrentChange8 = (val: number) => {
  currentPage8.value = val
  getCopyDosageList()
}
const getCopyDosageList = debounce(async () => {
  isLoading8.value = true
  let tableDataList = await service.post<any, any>('/Cargo/getCopyingDosageList', {
    currentStyleColor: currentTable2Row.value.styleColor,
    currentStyleNo: currentTableRow.value.style,
    pageNum: currentPage8.value,
    pageSize: pageSize8.value,
    styleNo: formList8.value.find(
      (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '型体'
    )?.inputValue
  })
  isLoading8.value = false
  tableData8.value = tableDataList.list
  total8.value = tableDataList.total
  // currentRow8()
}, 500)
watch(formList8.value, () => {
  getCopyDosageList()
})
const selectedLists8 = ref([])
const selectTableList8 = (selectedList: any) => {
  selectedLists8.value = selectedList
}

// 注意事项建档按钮模块
const dialogVisible = ref(false) // Dialog显示隐藏
const PrecautionsDateList = ref([])
// 查询
const PrecautionsFileMethods = async () => {
  const result = (await LoginWork.post<any, any>(`/Cargo/getNotesForFilingList`, {
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style
  })) as any
  PrecautionsDateList.value = result.data.map((item: any) => {
    item.change = 'Y'
    item.disableConfirm = true
    return item
  })
}
// 注意事项建档保存
const inputChange = async () => {
  const result = await LoginWork.post<any, any>('/Cargo/getNotesForFilingSave', {
    styleColor: currentTable2Row.value.styleColor,
    styleNo: currentTableRow.value.style,
    list: PrecautionsDateList.value
  })
  if (result.code === 200) {
    PrecautionsFileMethods()
    JMessage.success(result.message)
  } else {
    JMessage.error(result.message)
  }
}

const tableData2 = ref([]) as any
const router = useRouter()
const tableHeader19 = ref([
  {
    label: '序号',
    prop: 'seqNo',
    change: true,
    width: '90'
  },
  {
    label: '事项名称',
    prop: 'seqName',
    change: true,
    width: '90'
  },
  {
    label: '注意事项',
    prop: 'prodMemo'
  }
])

// 分类关键词定义模块
const formList10 = ref([
  {
    type: 'input',
    inputPlaceholder: '请输入材料分类名称',
    inputValue: ''
  },
  {
    type: 'input',
    inputPlaceholder: '请输入材料品名关键词',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '插入'
  }
]) as any
const drawer = ref(false)
const findClicked10 = async (content: string) => {
  if (content === '插入') {
    const res = (await LoginWork.post('/sdStyle/addClassificationKey', {
      typeName:
        formList10.value.find(
          (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料分类名称'
        )?.inputValue || '',
      keyword:
        formList10.value.find(
          (item: any) =>
            item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料品名关键词'
        )?.inputValue || ''
    })) as any
    if (res.code === 200) {
      formList10.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料分类名称'
      ).inputValue = ''
      formList10.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料品名关键词'
      ).inputValue = ''
      getTableList10()
      JMessage.success(res.message)
    } else {
      JMessage.error(res.message)
    }
  }
}
const tableData10 = ref([])
const tableHeader10 = ref([
  {
    width: '150',
    label: '材料名称分类',
    prop: 'typeName'
  },
  {
    width: '350',
    label: '材料品名关键词',
    prop: 'keyword'
  }
])
const getTableList10 = async () => {
  const res = (await LoginWork.post('/sdStyle/classificationKeyList', {
    typeName:
      formList10.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料分类名称'
      )?.inputValue || '',
    keyword:
      formList10.value.find(
        (item: any) => item.inputPlaceholder && Jzhcn.Find[item.inputPlaceholder.split('.')[1] as keyof typeof Jzhcn.Find] === '请输入材料品名关键词'
      )?.inputValue || ''
  })) as any
  if (res.code === 200) {
    tableData10.value = res.data
  }
}
watch(formList10.value, () => {
  getTableList10()
})

// BOM资料复制模块
const dialogStyle = ref('')
const dialogColorCode = ref('')
const dialogColorName = ref('')
const tableHeader13 = ref([
  {
    label: '工厂型体',
    prop: 'style'
  },
  {
    label: '颜色代码',
    prop: 'colorCode'
  },
  {
    label: '颜色名称',
    prop: 'color'
  }
])
const tableData13 = ref([]) as any
const isLoading13 = ref(false)
const currentPage13 = ref(1)
const pageSize13 = ref(40)
const total13 = ref(0)
const handleSizeChange13 = (val: number) => {
  pageSize13.value = val
  getTableList13()
}
const handleCurrentChange13 = (val: number) => {
  currentPage13.value = val
  getTableList13()
}
const getTableList13 = async () => {
  isLoading13.value = true
  const res = await service.post<any, any>(`/sdStyle/getUnProcessStyle?choose=${4}`, {
    color: dialogColorName.value,
    colorCode: dialogColorCode.value,
    pageNum: currentPage13.value,
    pageSize: pageSize13.value,
    style: dialogStyle.value
  })
  tableData13.value = res.list
  total13.value = res.total
  isLoading13.value = false
}
const dialog = ref(false)
const thDialog = ref(1)
const clickInput = (item: any, type: number) => {
  thDialog.value = type
  thDialog.value = type
  if (item.inputPlaceholder === '工厂型体 颜色代码 颜色名称') {
    tableData13.value = []
    dialogStyle.value = ''
    dialogColorCode.value = ''
    dialogColorName.value = ''
    dialog.value = true
    getTableList13()
  }
}
watch([dialogStyle, dialogColorCode, dialogColorName], (val) => {
  getTableList13()
})
const dbClick = async (row: any) => {
  if (thDialog.value === 1) formList11.value[0].inputValue = `${row.style}  ${row.colorCode}  ${row.color}`
  if (thDialog.value === 2) formList12.value[0].inputValue = `${row.style}  ${row.colorCode}  ${row.color}`
  if (thDialog.value === 3) formList13.value[0].inputValue = `${row.style}  ${row.colorCode}  ${row.color}`
  dialog.value = false
  tableData13.value = []
}
const BOMdialog = ref(false)
const stylePageSize13 = ref(40)
const styleCurrentPage13 = ref(1)
const formList11 = ref([
  {
    inputLabel: '工厂型体 颜色代码 颜色名称：',
    inputWidth: '350px',
    type: 'input',
    inputPlaceholder: '工厂型体 颜色代码 颜色名称',
    inputValue: ''
  }
]) as any
const formList12 = ref([
  {
    inputLabel: '工厂型体 颜色代码 颜色名称：',
    inputWidth: '350px',
    type: 'input',
    inputPlaceholder: '工厂型体 颜色代码 颜色名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '复制'
  }
]) as any
const BOMradio = ref('01')
// 复制按钮触发函数
const findClicked12 = async (content: any) => {
  const res = (await LoginWork.post('/sdStyle/bomDataReplication', {
    mtlColorCheck: BOMradio.value === '01' ? '1' : '0',
    copyStyleColor: '',
    req1: {
      style: formList11.value[0].inputValue.split('  ')[0],
      colorCode: formList11.value[0].inputValue.split('  ')[1],
      color: formList11.value[0].inputValue.split('  ')[2]
    },
    req2: {
      style: formList12.value[0].inputValue.split('  ')[0],
      colorCode: formList12.value[0].inputValue.split('  ')[1],
      color: formList12.value[0].inputValue.split('  ')[2]
    }
  })) as any
  if (res.code === 200) {
    JMessage.success('复制成功')
    formList11.value[0].inputValue = ''
    formList12.value[0].inputValue = ''
    BOMdialog.value = false
  } else {
    JMessage.error(res.message)
  }
}

// BOM资料删除
const styleTotal3 = ref(0)
const formList13 = ref([
  {
    inputLabel: '工厂型体 颜色代码 颜色名称：',
    inputWidth: '350px',
    type: 'input',
    inputPlaceholder: '工厂型体 颜色代码 颜色名称',
    inputValue: ''
  },
  {
    type: 'button',
    checkboxLabel: '整个型体颜色删除'
  }
]) as any
const getBOMSelectList3 = async () => {
  const res = (await service.post('/Cargo/getDevelopBomList', {
    colorCode: '',
    pageNum: styleCurrentPage13.value,
    pageSize: stylePageSize13.value,
    styleColor: '',
    styleNo: formList13.value[0].selectValue || ''
  })) as any
  styleTotal3.value = res.total
  formList13.value[0].selectOptions = res.list.map((item: any) => {
    return {
      optionLabel: item,
      optionValue: item
    }
  })
}
const BOMDeleteDialog = ref(false)
const findClicked13 = async (content: any) => {
  if (content === '整个型体颜色删除') {
    const res = (await LoginWork.post('/Cargo/getDeleteBomStyleColor', {
      cfmFlag: currentTable2Row.value.cfmFlag,
      styleColor: formList13.value[0].inputValue.split('  ')[2],
      styleNo: formList13.value[0].inputValue.split('  ')[0]
    })) as any
    if (res.code === 200) {
      JMessage.success('删除成功')
      formList13.value[0].inputValue = ''
      BOMDeleteDialog.value = false
      getTableList()
    } else {
      JMessage.error(res.message)
    }
  }
}
</script>

<style lang="less" scoped>
.el-select-dropdown__loading {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100px;
  font-size: 20px;
}

.circular {
  display: inline;
  height: 30px;
  width: 30px;
  animation: loading-rotate 2s linear infinite;
}

.path {
  animation: loading-dash 1.5s ease-in-out infinite;
  stroke-dasharray: 90, 150;
  stroke-dashoffset: 0;
  stroke-width: 2;
  stroke: var(--el-color-primary);
  stroke-linecap: round;
}

.loading-path .dot1 {
  transform: translate(3.75px, 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
}

.loading-path .dot2 {
  transform: translate(calc(100% - 3.75px), 3.75px);
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.4s;
}

.loading-path .dot3 {
  transform: translate(3.75px, calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 1.2s;
}

.loading-path .dot4 {
  transform: translate(calc(100% - 3.75px), calc(100% - 3.75px));
  fill: var(--el-color-primary);
  animation: custom-spin-move 1s infinite linear alternate;
  opacity: 0.3;
  animation-delay: 0.8s;
}

@keyframes loading-rotate {
  to {
    transform: rotate(360deg);
  }
}

@keyframes loading-dash {
  0% {
    stroke-dasharray: 1, 200;
    stroke-dashoffset: 0;
  }

  50% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -40px;
  }

  100% {
    stroke-dasharray: 90, 150;
    stroke-dashoffset: -120px;
  }
}

@keyframes custom-spin-move {
  to {
    opacity: 1;
  }
}

h1 {
  font-size: 16px;
}

.ml5 {
  margin-left: 5px !important;
}
</style>
